<template>
  <div class="order-info-bar">
    <div class="order-info-content">
      <div class="order-info">
        <div v-if="orderNo" class="order-info-item">
          <span class="order-info-label">订单号:</span>
          <a 
            :href="`${URL_CONFIG.ERP_BASE_URL}/#/crm/crmorder?kw=${orderNo}`" 
            target="_blank"
            class="order-link"
          >
            {{ orderNo }}
          </a>
        </div>
        <div v-if="!orderNo" class="order-info-item no-order">
          <span class="order-info-value">暂无订单信息</span>
        </div>
        <div v-if="orderName" class="order-info-item">
          <span class="order-info-label">名称:</span>
          <span class="order-info-value">{{ orderName }}</span>
        </div>
        <div v-if="orderStatus" class="order-info-item">
          <span class="order-info-label">状态:</span>
          <span class="order-status">{{ orderStatus }}</span>
        </div>
        <div v-if="orderNote || orderRemark" class="order-info-item">
          <span class="order-info-label">订单备注:</span>
          <span class="order-info-value">{{ orderNote || orderRemark }}</span>
        </div>
        <div v-if="remarks && remarks.length > 0" class="order-info-item">
          <span class="order-info-label">跟进信息:</span>
          <span class="order-info-value operation-suggestion">{{ getRemarksContent() }}</span>
        </div>
        <div v-if="createdAt" class="order-info-item">
          <span class="order-info-label">创建时间:</span>
          <span class="order-info-value">{{ formatDate(createdAt) }}</span>
        </div>
      </div>
      <div class="order-actions">
        <button class="action-button" @click="modifyInfo">修改信息</button>
        <button class="action-button close-button" @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { triggerModifyInfoDialog } from '../utils/whatsappHandler';
import { URL_CONFIG } from '../utils/defines';

const props = defineProps({
  orderNo: {
    type: String,
    default: ''
  },
  orderName: {
    type: String,
    default: ''
  },
  orderStatus: {
    type: String,
    default: ''
  },
  orderNote: {
    type: String,
    default: ''
  },
  orderRemark: {
    type: String,
    default: ''
  },
  remarks: {
    type: Array as PropType<{
      content?: string;
      note?: string;
    }[]>,
    default: () => []
  },
  operationSuggestion: {
    type: String,
    default: ''
  },
  createdAt: {
    type: String,
    default: ''
  },
  chatId: {
    type: String,
    default: ''
  }
});

defineEmits(['close', 'follow']);

// 修改信息
const modifyInfo = () => {
  if (props.chatId) {
    triggerModifyInfoDialog(props.chatId);
  }
};

// 格式化日期
function formatDate(dateStr: string): string {
  if (!dateStr) return '';
  
  try {
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (e) {
    return dateStr;
  }
}

// 打开订单页面
function openOrderPage() {
  if (props.orderNo) {
    window.open(`${URL_CONFIG.ERP_BASE_URL}/#/crm/crmorder?kw=${props.orderNo}`, '_blank');
  }
}

function getRemarksContent(): string {
  if (!props.remarks || props.remarks.length === 0) {
    return '';
  }
  
  // 只获取最后一条备注信息
  const lastRemark = props.remarks[0];
  let content = '';
  
  if (typeof lastRemark === 'string') {
    content = lastRemark;
  } else if (Array.isArray(lastRemark)) {
    if (lastRemark.length > 0) {
      const firstItem = lastRemark[0];
      if (typeof firstItem === 'string') {
        content = firstItem;
      } else {
        content = firstItem.content || firstItem.note || '';
      }
    }
  } else {
    content = lastRemark.content || lastRemark.note || '';
  }
  
  // 限制显示长度为400个字符
  if (content.length > 400) {
    return content.substring(0, 400) + '...';
  }
  
  return content;
}
</script>

<style scoped>
.order-info-bar {
  position: relative !important;
  z-index: 1001 !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #f0f8ff !important;
  border-bottom: 1px solid #d0e0f0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  color: #333 !important;
}

.order-info-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.order-info {
  display: flex !important;
  font-size: 10px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex: 1 !important;
}

.order-info-item {
  display: flex !important;
  font-size: 10px !important;
  align-items: center !important;
}

.order-info-label {
  font-weight: bold !important;
  font-size: 10px !important;
  margin-right: 4px !important;
  color: #555 !important;
}

.order-info-value {
  font-size: 10px !important;
  color: #333 !important;
}

.no-order {
  font-style: italic !important;
  color: #888 !important;
}

.order-link {
  color: #00a884 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  background-color: rgba(0, 168, 132, 0.1) !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
}

.order-link:hover {
  background-color: rgba(0, 168, 132, 0.2) !important;
  text-decoration: underline !important;
}

.order-status {
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
  font-size: 10px !important;
  font-weight: bold !important;
}

.order-actions {
  display: flex !important;
  gap: 8px !important;
  margin-left: 16px !important;
}

.action-button {
  padding: 6px 12px !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: #00a884 !important;
  color: white !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.action-button:hover {
  background-color: #008f70 !important;
}

.close-button {
  background-color: #f5f5f5 !important;
  color: #333 !important;
}

.close-button:hover {
  background-color: #e0e0e0 !important;
}

.operation-suggestion {
  color: #e65100 !important;
  font-weight: bold !important;
  background-color: #fff3e0 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

@media (max-width: 768px) {
  .order-info-content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .order-actions {
    margin-top: 12px !important;
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
}
</style> 